<template>
  <div id="coupon">
    <div class="feature">
      <h4>查询</h4>
      <div :model="formInline">
        <el-button type="primary"
                   @click="onSearch">搜索</el-button>
        <el-input placeholder="请输入菜品名称"
                  class="Oin"
                  v-model="formInline.search"
                  @keyup.enter.native="onSearch"></el-input>
      </div>
    </div>
    <div class="add clear">
      <h4 :style="{marginLeft:'20px'}">套餐列表</h4>
      <el-button type="primary"
                 @click="addOn">新增促销商品</el-button>
    </div>
    <div>
      <el-table :data="changeTable"
                stripe
                style="width: 100%"
                :cell-style="{ border: '1px solid #DCDCDC' }"
                :header-cell-style="{
          background: '#F0F0F0',
          border: '1px solid #DCDCDC',
          color: '#000000',
        }">
        <el-table-column prop="pack_rank"
                         label="序号"
                         width="120"
                         align="center">
        </el-table-column>
        <el-table-column prop="menu_name"
                         label="菜品名称"
                         width="120"
                         align="center">
        </el-table-column>
        <el-table-column prop="menu_num"
                         label="菜品编码"
                         width="100"
                         align="center">
        </el-table-column>
        <el-table-column prop="pack_publish_time"
                         label="开始日期"
                         width="180"
                         align="center">
        </el-table-column>
        <el-table-column prop="pack_start_time"
                         label="结束日期"
                         width="180"
                         align="center">
        </el-table-column>
        <el-table-column prop="pack_state"
                         label="状态"
                         width="80"
                         align="center">
        </el-table-column>
        <el-table-column prop="user_name"
                         label="创建人"
                         width="100"
                         align="center">
        </el-table-column>
        <el-table-column prop="pack_start_time"
                         label="创建时间"
                         width="180"
                         align="center">
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button @click="revise(scope.row)"
                       type="text"
                       size="small"
                       :style="
                scope.row.pack_state == '正常'
                  ? { display: 'none' }
                  : { display: 'inline-block', margin: '5px' }
              ">查看</el-button>
            <el-button type="text"
                       size="small"
                       @click="over({ ...scope.row, del: 'del' })"
                       :style="
                scope.row.pack_state == '终止促销'
                  ? { display: 'none' }
                  : { display: 'inline-block', margin: '5px' }
              ">终止促销</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination @size-change="pageTatol"
                     @current-change="pageChange"
                     :page-sizes="[5, 10]"
                     :page-size="100"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <el-dialog title="查看优惠商品"
               :visible.sync="reviseVisible"
               width="30%">
      <el-form ref="form"
               :model="reviseData"
               label-width="80px">
        <el-form-item label="序号">
          <el-input disabled
                    v-model="reviseData.pack_rank"></el-input>
        </el-form-item>
        <el-form-item label="菜品名称">
          <el-input v-model="reviseData.menu_name"></el-input>
        </el-form-item>
        <el-form-item label="菜品编码">
          <el-input v-model="reviseData.menu_num"></el-input>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-input v-model="reviseData.pack_publish_time"></el-input>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-input v-model="reviseData.pack_start_time"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="reviseData.pack_state"></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="reviseData.user_name"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="reviseData.pack_start_time"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="新增促销商品"
               :visible.sync="dialogFormVisible">
      <el-form :model="addData">
        <el-date-picker v-model="addData.DatePicker"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH : mm : ss">
        </el-date-picker>

        <el-form-item label="菜品名称"
                      class="top">
          <el-select v-model="addData.region"
                     placeholder="请选择促销商品">
            <el-option v-for="i in foods"
                       :label="i.menu_name"
                       :value="i.menu_id"
                       :key="i.menu_num"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="addData.way"
                     active-text="正常"
                     inactive-text="终止促销">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="onin()">确 定</el-button>
      </div>
    </el-dialog>
    <div>{{ num }}</div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  data () {
    return {
      page: 1,
      count: 5,
      formInline: {
        search: "",
      },
      search: "",
      reviseVisible: false,
      dialogFormVisible: false,
      reviseData: {},
      addData: {
        date: this.formatDate,
      },
      addchange: {
        park_id: "",
        park_num: "",
        pack_start_time: "",
        pack_publish_time: "",
        pack_end_time: "",
        pack_state: "",
        pack_rank: "",
        pack_founder: "",
      },
      DatePicker: "",
    };
  },
  methods: {
    ...mapActions("coupon", {
      jia: "jiaA",
      over: "over",
      food: "food",
      line: "line",
      sendTwo: "sendTwo",
    }),
    onin () {
      if (this.addData.DatePicker) {
        this.formatDate();
        let user = JSON.parse(sessionStorage.getItem("user")).user_id;
        this.addchange.pack_start_time =
          this.addData.DatePicker[0].slice(0, 11) +
          "" +
          this.addData.DatePicker[0]
            .slice(11, this.addData.DatePicker[0].length)
            .replace(/ /g, "");
        this.addchange.pack_end_time =
          this.addData.DatePicker[1].slice(0, 11) +
          "" +
          this.addData.DatePicker[1]
            .slice(11, this.addData.DatePicker[1].length)
            .replace(/ /g, "");
        this.addchange.pack_publish_time = this.addData.date;
        this.addchange.park_num = this.addData.region;
        this.addchange.pack_founder = user;
        this.addData.way = true
          ? (this.addchange.pack_state = "正常")
          : (this.addchange.pack_state = "终止促销");
        this.addchange.pack_rank = this.num;
      }
      (this.dialogFormVisible = false), console.log(this.addchange);
      this.sendTwo(this.addchange);
    },
    tooltip (m) {
      if (m == "菜品添加成功") {
        this.$message({
          type: "success",
          message: "菜品添加成功",
        });
        m = "";
      }
      if (m == "菜品添加失败") {
        this.$message({
          type: "info",
          message: "菜品添加失败",
        });
      }
    },
    addOn () {
      this.dialogFormVisible = true;
    },
    revise (n) {
      (this.reviseVisible = true), (this.reviseData = { ...n });
    },

    pageChange (n) {
      this.page = n;
    },
    del (b) {
      console.log(b);
    },
    onSearch () {
      if (this.formInline.search.trim()) {
        this.search = this.formInline.search;
      } else {
        this.search = "";
      }
      console.log(this.search);
    },
    pageTatol (m) {
      this.count = m;
    },
    formatDate () {
      let date = new Date();
      let YY = date.getFullYear() + "-";
      let MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      this.addData.date = YY + MM + DD + " " + hh + mm + ss;
    },
  },
  computed: {
    num () {
      return this.$store.state.coupon.line;
    },
    foods () {
      return this.$store.state.coupon.food;
    },
    total () {
      let sum = this.$store.state.coupon.product;
      if (this.search) {
        let arr = sum.filter((v) => {
          if (v.menu_name.indexOf(this.search) != -1) {
            return v;
          }
        });
        return arr.length;
      } else {
        return sum.length;
      }
    },
    changeTable () {
      let tab = this.$store.state.coupon.product;
      if (this.search) {
        let arr = tab.filter((v) => {
          if (v.menu_name.indexOf(this.search) != -1) {
            return v;
          }
        });
        return arr.slice((this.page - 1) * this.count, this.page * this.count);
      } else {
        return tab.slice((this.page - 1) * this.count, this.page * this.count);
      }
    },
  },
  created () {
    this.jia();
    this.food();
    this.line();
  },
  mounted () { },
  updated () {
    let m = this.$store.state.coupon.d;
    if (m == "菜品添加成功") {
      this.tooltip(m);
      this.$store.state.coupon.d = null;
    }
    if (m == "菜品添加失败") {
      this.tooltip(m);
      this.$store.state.coupon.d = null;
    }
  },
};
</script>
<style scoped lang='less'>
#coupon {
  button {
    width: 80px;
    height: 40px;
    border-radius: 20px;
  }
  .block {
    text-align: center;
  }
}
.top {
  margin-top: 50px;
}
.feature {
  h4 {
    height: 50px;
    line-height: 50px;
    text-align: left;
  }
  div {
    height: 100px;
    line-height: 100px;
    text-align: left;
    .Oin {
      width: 200px;
      margin-left: 20px;
    }
  }
}
.add {
  height: 50px;
  background: #f0f0f0;
  margin-bottom: 10px;

  margin-top: 20px;
  h4 {
    float: left;
    line-height: 50px;
  }
  .el-button {
    float: right;
    width: 120px !important;
  }
}
</style>